<template>
  <div>
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item :to="{ path: '/contractManagement' }"
          >供应链管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/checkmanagement/manage' }"
          >验收管理</el-breadcrumb-item
        >
        <!-- <el-breadcrumb-item
            :to="{
              path: '/checkmanagement/manage/arrival-check-list'
            }"
            >验收管理</el-breadcrumb-item
          > -->
        <el-breadcrumb-item :to="{ path: '/checkManagement/returnsManage' }"
          >退货管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>
          <span>
            <span>查看</span>
            <span style="margin-left: 10px; color: #4a4a4a">
              {{ $route.query.bowOutName }}
            </span>
          </span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="ccui-app-container-detail">
      <div class="ccui-app-container-detail-body">
        <div
          :class="focus == 0 ? 'ccui-top-title' : 'top-title'"
          @click="tabChange(0)"
        >
          <span style="cursor: pointer">基本信息</span>
        </div>
        <div
          :class="focus == 1 ? 'ccui-top-title' : 'top-title'"
          style="margin-left: 20px"
          @click="tabChange(1)"
        >
          <span style="cursor: pointer">采购清单</span>
        </div>
        <div
          :class="focus == 2 ? 'ccui-top-title' : 'top-title'"
          style="margin-left: 20px"
          @click="tabChange(2)"
        >
          <span style="cursor: pointer">附件信息</span>
        </div>
        <!-- 基本信息 -->
        <detailBaseInfo
          v-if="focus == 0"
          ref="baseInfo"
          labelWidth="130px"
          :formList="baseFormList"
          :detail="details"
        />

        <!-- 采购清单 -->
        <!-- <keep-alive> -->
        <div
          class="ccui-multifunctional-table-wrapper"
          style="marign-top: 10px"
          v-if="focus == 1"
        >
          <div
            style="
                width: 100%;
                height: 50px;
                backgroung: red;
                display: flex;
                justify-content: flex-end;
              "
          ></div>
          <ux-grid
            align="center"
              ref="multipleTable"
              :data="purchaseData"
              border
              class="ccui-multifunctional-table"
              :summary-method="getSummaries"
              lazy
              show-summary
              keep-source
              max-height="9999"
              show-overflow
              @selection-change="selectionLineChangeHandle"
              :header-cell-class-name="must"
              :highlightCurrentRow="false"
              :widthResize="true"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
          >
            <!-- <ux-table-column type="checkbox" width="55" fixed="left" /> -->
            <ux-table-column
              type="index"
              title="序号"
              width="80"
              fixed="left"
              show-overflow-tooltip
            />
            <ux-table-column
              title="设备物资编码"
              field="materialCode"
              width="110"
              fixed="left"
              show-overflow-tooltip
            />
            <ux-table-column
              title="设备物资名称"
              field="materialName"
              width="300"
              fixed="left"
              show-overflow-tooltip
            />
            <ux-table-column
              title="设备物资说明"
              field="materialState"
              width="130"
              show-overflow-tooltip
            />
            <ux-table-column
              title="分类名称"
              field="categoryName"
              width="130"
              show-overflow-tooltip
            />
            <ux-table-column
              title="计量单位"
              field="measureUnit"
              width="90"
              show-overflow-tooltip
            />
            <ux-table-column
              title="退货地点"
              field="testdaohuo"
              width="300"
              show-overflow-tooltip
            />
            <ux-table-column
              title="验收数量"
              field="acceptanceCurrentNumber"
              show-overflow-tooltip
              width="150"
              align="right"
              header-align="left"
            />
            <ux-table-column
              title="实际验收数量"
              field="acceptanceEndNumber"
              show-overflow-tooltip
              width="150"
              align="right"
              header-align="left"
            />
            <ux-table-column
              title="本次退货数量"
              field="bowOutNumber"
              width="130"
              align="right"
              header-align="left"
              show-overflow-tooltip
            >
              <!-- <template slot-scope="{ row }">
                  <el-input
                    placeholder="请输入本次退货数量"
                    v-model="row.bowOutNumber"
                    disabled
                  >
                  </el-input>
                </template> -->
            </ux-table-column>
            <ux-table-column
              title="退货数量"
              field="bowOutNumber"
              width="130"
              align="right"
              header-align="left"
              show-overflow-tooltip
            >
            </ux-table-column>
            <ux-table-column
              title="生产厂家/品牌"
              width="130"
              field="manufacturerBrand"
              show-overflow-tooltip
            />
            <ux-table-column
              title="备注"
              width="300"
              field="remake"
              show-overflow-tooltip
            />
          </ux-grid>
        </div>

        <!-- 附件信息 -->
        <attachment
          ref="attachment"
          @fileIdArr="fileIdArr"
          :fileArrs="fileArrs"
          v-if="focus == 2"
        />

        <!-- 底部 -->
        <!-- <el-bottom-guide>
            <ul class="ccui-bottom-button">
              <li>
                <el-button
                  type="bottom"
                  icon="icon-ccui-return"
                  @click="handleBack"
                  >返回</el-button
                >
              </li>
            </ul>
          </el-bottom-guide> -->
        <!--  底部导航栏及签名导出  -->
        <bottomGuide
          v-if="isTrue"
          busiType="119"
          approvalStatus="approvaled"
          pageType="bowoutcert/detailExport"
          :curPageId="$route.query.id"
          @handleBack="handleBack"
        />
      </div>
    </div>
  </div>
</template>
<script>
import validators from "@/basa/utils/validators";
// import {
//   saveBowOutCert,
//   getAcceptanceCert,
//   editBowOutCert
// } from "../api/bowOut";
import attachment from "../components/file-check";
import detailBaseInfo from "@/basa/components/public/detailBaseInfo";
import bottomGuide from "@/basa/components/public/bottomGuide";
import { getBowOutCert } from "../api/bowOut";
import { formatNumber } from "@/basa/utils";
export default {
  data() {
    return {
      isTrue: false,
      baseFormList: [
        { label: "填报单位", titleContent: "reportInOrgName" },
        { label: "供应商", titleContent: "supplier" },
        { label: "退货单编号", titleContent: "bowOutNumber" },
        { label: "退货单名称", titleContent: "bowOutName" },
        { label: "验收单编号", titleContent: "acceptanceNumber" },
        // { label: "退货地点", titleContent: "bowOutPlace", title: true },
        { label: "合同编号", titleContent: "contractNumber" },
        { label: "验收人", titleContent: "acceptor" },
        { label: "验收人联系电话", titleContent: "acceptancePhone" },
        { label: "退货人", titleContent: "bowOutPeople" },
        { label: "退货人联系电话", titleContent: "bowOutPhone" },
        { label: "供应商联系电话", titleContent: "supplierPhone" },
        { label: "退货日期", titleContent: "bowOutDate" },
        // { label: "合同编号", titleContent: "contractNumber" },
        { label: "合同名称", titleContent: "contractName" },
        { label: "编制日期", titleContent: "compileDate" },
        { label: "编制人", titleContent: "compilePeople", span: 18 },
        { label: "退货原因", titleContent: "bowOutType", span: 18 },
        {
          label: "退货备注",
          titleContent: "bowOutReason",
          title: true,
          span: 18
        }
      ],
      rules: {
        bowOutNumber: [
          {
            required: true,
            message: "请输入退货单编号",
            trigger: "blur"
          },
          {
            validator: validators.numAndLetter,
            message: "只能输入数字和字母",
            trigger: "blur"
          }
        ],
        bowOutName: [
          {
            required: true,
            message: "请输入退货单名称",
            trigger: "blur"
          }
        ],
        acceptanceNumber: [
          {
            required: true,
            message: "请选择验收单编号",
            trigger: "blur"
          },
          {
            validator: validators.numAndLetter,
            message: "只能输入数字和字母",
            trigger: "blur"
          }
        ],
        bowOutPlace: [
          {
            required: true,
            message: "请输入退货地点",
            trigger: "blur"
          }
        ],
        bowOutType: [
          {
            required: true,
            message: "请选择退货类型",
            trigger: "blur"
          }
        ],
        bowOutReason: [
          {
            required: true,
            message: "请输入退货原因",
            trigger: "blur"
          }
        ],
        acceptancePhone: [
          { message: "请输入验收人联系电话", trigger: "blur" },
          {
            validator: validators.mobile,
            message: "请输入正确的手机号格式",
            trigger: "blur"
          }
        ],
        supplierPhone: [
          { message: "请输入供应商联系电话", trigger: "blur" },
          {
            validator: validators.mobile,
            message: "请输入正确的手机号格式",
            trigger: "blur"
          }
        ]
      },
      partBdata: [], //乙方数据
      selectVal: [],
      purchaseData: [], //采购清单list
      isShowSearch: true,
      showTextarea: false,
      dialogVisible: false,
      focus: 0,
      editBowOutNumber: "", //编辑退货数量
      bowOut: "", //退货类型
      reportInOrgId: "", //填报单位编码
      reportOrgDeptId: "", //填报单位部门编码
      reportOrgDeptName: "", //填报单位部门
      supplierCode: "", //供应商编码
      contractId: "", //合同主键
      acceptanceId: "", //验收单主键
      uploadIds: [], //上传的文件id数组
      commitType: "", //提交状态
      invoiceId: "",
      invoiceNumber: "",
      invoiceName: "",
      orderId: "",
      orderNumber: "",
      orderName: "",
      categoryName: "",
      supplierOrgId: "", //供应商主键
      fileArrs: [],
      bowOutText: "",
      details: {}
    };
  },
  components: {
    attachment,
    detailBaseInfo,
    bottomGuide
  },
  activated() {
    getBowOutCert({ id: this.$route.query.id }).then(res => {
      const { bowOutBillBOList, bowOutCertBO, bowOutFiles } = res.data.data;

      bowOutBillBOList.forEach((e, i) => {
        if (i == 0) {
          this.categoryName = e.categoryName;
        }
        e.testdaohuo =
          e.areaName +
          e.provinceName +
          e.cityName +
          e.countyName +
          e.acceptancePlace;
        e.acceptanceCurrentNumber = formatNumber(e.acceptanceCurrentNumber, 3);
        e.bowOutNumber = formatNumber(e.bowOutNumber, 3);
        e.acceptanceEndNumber = formatNumber(e.acceptanceEndNumber, 3);
      });
      this.purchaseData = bowOutBillBOList;
      this.bowOut = bowOutCertBO.bowOutTypeCode;
      this.bowOutText = bowOutCertBO.bowOutType;
      this.fileArrs = bowOutFiles;
      this.fileArrs.forEach((e, i) => {
        e.fileSize = Math.round(e.fileSize / 1024) + "kb";
      });
      this.details = bowOutCertBO;
      if (bowOutCertBO.bowOutDate) {
        this.$set(
          this.details,
          "bowOutDate",
          this.details.bowOutDate.substring(0, 10)
        );
      }

      this.$set(
        this.details,
        "compileDate",
        this.details.compileDate.substring(0, 10)
      );
      this.isTrue = true;
    });
  },
  deactivated() {
    this.isTrue = false;
  },
  methods: {
    fileIdArr(value) {
      this.uploadIds = value;
    },
    tabChange(index) {
      switch (index) {
        case 0:
          this.focus = 0;
          break;
        case 1:
          this.focus = 1;
          break;
        case 2:
          this.focus = 2;
          break;
      }
    },
    // 采购清单table获取选中的数据
    selectionLineChangeHandle(val) {
      this.selectVal = val;
    },
    handleBack() {
      this.$router.push("/checkManagement/returnsManage/salesRegister-list");
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (
          [
            "bowOutNumber",
            "acceptanceCurrentNumber",
            "acceptanceEndNumber"
          ].includes(column.property)
        ) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                let num = Number(prev) + Number(curr);
                return num;
              } else {
                return Number(prev);
              }
            }, 0);
            if ( index==7 || index == 8 || index == 10 || index == 9) {
              sums[index] = formatNumber(sums[index], 3);
            }
          }
        }
      });

      return [sums];
    },
    must(obj) {
      if (obj.columnIndex == 7 || obj.columnIndex == 10) {
        return "must";
      }
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
/deep/
  .ccui-multifunctional-table-wrapper
  .el-table
  .el-table__footer-wrapper
  tbody
  td:nth-child(1) {
  color: #4a4a4a;
}
/deep/
  .ccui-multifunctional-table-wrapper
  .el-table
  .el-table__footer-wrapper
  tbody
  td {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #0089ef;
}
.top-title {
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  height: 23px;
  line-height: 20px;
}
// 基本信息样式
.relative {
  position: relative;
  .chereay {
    margin-left: 10px;
    position: absolute;
  }
}

.demo-ruleForm {
  width: 80%;
  margin: 20px 0 0 50px;
}
/deep/ .el-table th.must > .cell:before {
  content: "* ";
  color: #ff1818;
}
/deep/ .ccui-multifunctional-table-wrapper .el-table__header-wrapper th {
  border-right: 1px solid #edf2fc;
}
/deep/ .ccui-multifunctional-table-wrapper .el-table td {
  border-right: 1px solid #edf2fc;
}
/deep/.el-table__fixed-footer-wrapper tbody td {
  background: #fff;
}
/deep/.el-table {
  .el-table__body-wrapper {
    z-index: 2;
  }
}
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}

/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  pointer-events: none;
  td {
    pointer-events: auto;
  }
}
</style>
